x<template>
  <div class="listWapper">
    <customDetailsTopbar title="排污许可" flag @back="back" />
    <div id="customScroolBox" class="listInner px-1">
      <div class="d-flex mt-2 w-100">
        <custom-radio-tag1 class="mb-1 w-100" :list="tagList" :value="checkedValue" is-scroll @change="tagChange" />
      </div>
      <customSearch ref="customSearch" placeholder="请输入企业名称" :title="checkedTag + '列表'" :total="total" :is-super-search="true" @search="handleSearch" @superSearch="openSuperSearch" />
      <div v-if="tableList.length !== 0" class="common_list">
        <div v-for="(item,index) in tableList" :key="index" class="list_item" @click="goDetail(item)">
          <div class="content_area">
            <div class="number_order">{{ index + 1 }}</div>
            <div class="right_content">
              <div class="content_title" style="max-width: 100%">
                {{ item.companyName }}
              </div>
              <ul class="des-list">
                <li v-for="(des,ind) in desList" :key="des.value" class="des">
                  <i :class="'iconfont c-text-color' + (ind + 1)" v-html="des.icon" />
                  <div class="label">{{ des.label }}：</div>
                  <div class="value singe-line">
                    <el-link v-if="des.label === '附件'" type="primary" @click="openAttachPopUp(item[des.value])">查看</el-link>
                    <span v-else-if="des.label !== '监测报告' || (!(item.attachUuid && item[des.value]))" class="des-list-value-span">{{ item[des.value] || '/' }}</span>
                    <template v-else>
                      <template v-for="(it,indexs) in item[des.value]">
                        <el-link :key="indexs" type="primary" @click="handleDownLoad(it['fileUrl'])">{{ it.fileName || '/' }}</el-link>
                      </template>
                    </template>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <customLoadmore ref="customLoadmore" :page-num="form.pageNum" :pages="pages" @load="handlePages" />
    </div>
    <van-popup v-model="superSearch" position="right" :style="{ width: '90%', height: '100%' }" lock-scroll close-on-popstate closeable class="custom-van-pop">
      <div class="pop-vertical-flex">
        <div class="pop-content">
          <template v-if="checkedTag === '排污许可证'">
            <custom-timer type="date" title="发证日期" :start.sync="form.startTime" :end.sync="form.endTime" :is-interval="true" :time-range="1" :picker-title="'请选择发证日期'" />
            <customPopCheckbox :list="selectOptionAll['行业类别-fixed']" :check-value.sync="form.industryType" title="行业类别" />
            <customPopCheckbox :list="selectOptionAll['环保-管理级别']" :check-value.sync="form.manageLevel" title="管理级别" />
            <customPopCheckbox :list="selectOptionAll['排污许可证是否过期']" :check-value.sync="form.isdq" title="是否到期" />
          </template>
          <template v-else-if="checkedTag === '监测信息'">
            <custom-timer type="date" title="监测日期" :start.sync="form.startTime" :end.sync="form.endTime" :is-interval="true" :picker-title="'请选择监测监测日期'" />
          </template>
          <template v-else-if="checkedTag === '执行报告'">
            <custom-timer
              type="year"
              title="年度"
              :is-interval="false"
              :picker-title="'请选择年度'"
              :date-value="form.year"
              placeholder="请选择年度"
              @update:dateValue="getTime"
            />
            <customPopCheckbox :list="selectOptionAll['排污许可证管理-执行报告-报告类型']" :check-value.sync="form.reportTypeSplit" title="报告类型" />
            <customPopCheckbox :list="selectOptionAll['是否']" :check-value.sync="form.isPubSplit" title="是否已公开" />
          </template>
          <template v-else-if="checkedTag === '监测方案'">
            <custom-timer
              type="year"
              title="年度"
              :is-interval="false"
              :picker-title="'请选择年度'"
              :date-value="form.yearSplit"
              placeholder="请选择年度"
              @update:dateValue="getTimeYearSplit"
            />
            <customPopCheckbox :list="selectOptionAll['是否']" :check-value.sync="form.isPubSplit" title="是否已公开" />
          </template>
        </div>
        <div class="pop-bottom">
          <van-button type="default" @click="resetSuperSearch">清空</van-button>
          <van-button type="info" @click="handleSuperSearch">确认</van-button>
        </div>
      </div>
    </van-popup>
    <attachPopUp ref="attachPopUp" />
  </div>
</template>

<script>
import commonList from '@/assets/mixin/commonList'
import refHandler from '@/assets/mixin/refHandler'
import { hbPermitDataInfoList, HbPermitExecutiveReportList, HbPermitList, HbPermitOptionList } from '@/api/environment'

export default {
  mixins: [commonList, refHandler],
  data() {
    return {
      total: 10,
      pages: 1,
      form: {
        companyIds: '-1',
        pageNum: 1,
        pageSize: 10,
        industryType: '',
        startTime: '',
        companyName: '',
        year: '', // 所属年份
        yearSplit: '',
        endTime: '',
        manageLevel: '',
        isdq: '',
        reportTypeSplit: '',
        isPubSplit: '',
        dateTime: ''
      },
      tagList: [
        { label: '排污许可证', value: '排污许可证' },
        { label: '监测方案', value: '监测方案' },
        { label: '监测信息', value: '监测信息' },
        { label: '执行报告', value: '执行报告' }
      ],
      checkedTag: '排污许可证',
      checkedValue: 0,
      desList: [],
      desListMap: [
        [
          { label: '行业类别', value: 'industryTypeName', icon: '&#xe791;' },
          { label: '管理级别', value: 'manageLevel', icon: '&#xe6f7;' },
          { label: '发证日期', value: 'issueDate', icon: '&#xe617;' },
          { label: '有效期限', value: 'yearsDiff', icon: '&#xe6e3;' },
          { label: '是否到期', value: 'isdq', icon: '&#xe6a4;' },
          { label: '临期天数', value: 'gqts', icon: '&#xe61c;' }
        ],
        [
          { label: '标题名称', value: 'optionName', icon: '&#xe791;' },
          { label: '年度', value: 'dataYear', icon: '&#xe6f7;' },
          { label: '适用开始时间', value: 'effectiveStartTime', icon: '&#xe617;' },
          { label: '适用结束时间', value: 'effectiveEndTime', icon: '&#xe6e3;' },
          { label: '是否已公开', value: 'isPub', icon: '&#xe6a4;' },
          { label: '公开网站地址', value: 'pubWebUtl', icon: '&#xe61c;' },
          { label: '创建时间', value: 'creationTime', icon: '&#xe61c;' },
          { label: '附件', value: 'shareAttachVos', icon: '&#xe61c;' }
        ],
        [
          { label: '委托监测机构名称', value: 'organizationName', icon: '&#xe791;' },
          { label: '监测日期', value: 'organizationTime', icon: '&#xe6f7;' },
          { label: '上传时间', value: 'creationTime', icon: '&#xe6f7;' }
        ],
        [
          { label: '执行报告标题', value: 'executiveReportTitle', icon: '&#xe791;' },
          { label: '报告类型', value: 'executiveReportType', icon: '&#xe6f7;' },
          { label: '报告时间', value: 'executiveReportTime', icon: '&#xe617;' },
          { label: '是否已公开', value: 'isPub', icon: '&#xe617;' },
          { label: '公开网站地址', value: 'pubWebUrl', icon: '&#xe617;' },
          { label: '创建时间', value: 'creationTime', icon: '&#xe617;' }
        ]
      ],
      tableList: [],
      current: ''
    }
  },
  mounted() {
    const { current, tag } = this.$route.query
    this.current = current || ''
    this.checkedTag = tag || '排污许可证'
    this.tagList.find((v, index) => {
      if (v.label === this.checkedTag) {
        this.checkedValue = index
      }
    })
    this.desList = this.desListMap[this.checkedValue]
    this.getList()
  },
  methods: {
    getTime(val) {
      this.form.year = val
    },
    getTimeYearSplit(val) {
      this.form.yearSplit = val
    },
    // 排污许可证列表
    async getList() {
      const api = [
        HbPermitList,
        HbPermitOptionList,
        hbPermitDataInfoList,
        HbPermitExecutiveReportList
      ]
      this.$refs.customLoadmore.loadStatus = true
      // this.layout.showLoading()
      const { status, data } = await api[this.checkedValue](this.form)
      if (status === 0 && data) {
        this.tableList = this.tableList.concat(data.list)
        this.pages = data.pages
        this.total = data.total
        this.$refs.customLoadmore.loadStatus = false
        // this.layout.hideLoading()
      }
    },
    back() {
      this.$router.push({
        path: '/staging/environBusiness',
        query: { current: this.current }
      })
    },
    goDetail(item) {
      // this.checkedTag !== '监测信息' &&
      if (this.checkedTag !== '监测方案') {
        this.$router.push({
          path: '/staging/pollutionDischargeDetail',
          query: { current: this.current, tag: this.checkedTag, companyIds: item.companyId, ...item }
        })
      }
    },
    tagChange(val) {
      this.checkedTag = val.item.value
      this.checkedValue = val.index
      this.desList = this.desListMap[this.checkedValue]
      this.tableList = []
      this.resetSuperSearch()
      this.getList()
    },
    // 分页
    handlePages(value) {
      this.form.pageNum = value
      this.getList()
    },
    // 企业名称查询
    handleSearch(value) {
      this.form.companyName = value
      this.form.pageNum = 1
      this.tableList = []
      this.getList()
    },
    resetSuperSearch() {
      Object.keys(this.form).forEach(key => { this.form[key] = '' })
      this.$refs.customSearch.restore()
      this.form.pageNum = 1
      this.form.pageSize = 10
      this.form.companyIds = -1
    },
    handleSuperSearch() {
      this.superSearch = false
      this.form.pageNum = 1
      this.tableList = []
      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped>
.checkbox-title {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 30px;
}

.right_content{
  .des-list{
    display: flex;
    flex-wrap: wrap;
    .des{
      width: 100%;
    }
  }
}
.des-list-value-span {
  //line-height: 32px;
}
</style>
